<%--
Created by IntelliJ IDEA.
User: SongTiantian
Date: 2020/11/18
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/front-end/views/common/head.jsp"%>
    <title>未上映影片详情</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #top{
            width:100%;
            height:80px;
            background-color: #c81623;
        }
        #top p{
            padding: 10px;
            color:white;
            font-size:40px;

        }
        #mmain{
            width:100%;
            height:500px;
            /* background-color: rgb(70, 67, 67); */
            background-image: url(../../img/oneone.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #main{
            overflow: hidden;
            width:1100px;
            height:500px;
            margin:0 auto;
            /* background-color: green; */
        }
        #main>p{
            margin:10px 0;
            font-size:20px;
            color:white;
        }
        #xian{
            width:100%;
            height:2px;
            background-color: white;
        }
        #main-left{
            margin-top: 25px;
            /* margin-left:100px; */
            float:left;
            width: 300px;
            height: 400px;
            background-color: pink;
        }
        #main-left img{
            /* margin-top: 25px; */
            /* margin-left:100px; */
            /* float:left; */
            width: 300px;
            height: 400px;
            /* background-color: pink; */
        }
        #main-right p{
            margin-bottom: 10px;
            color:white;
            font-size: 18px;
        }
        #main-right{
            margin-left: 100px;
            margin-top: 25px;
            float:left;
            width:700px;
            height:200px;
            /* background-color: red; */
        }
        #cinema{
            overflow: hidden;
            width:1100px;
            height:900px;
            margin:0 auto;
            /* background-color: green; */
        }
        #choice-cinema{
            width:100%;
            height:200px; 
            margin-top: 20px;
            /* background-color: pink; */
        }
        #choice-left{
            float:left;
            width:15%;
            height:200px;
            background-color: #FFDDDC;
        }
        #choice-right{
            float:left;
            width:85%;
            height:200px;
            background-color:#FFF6F5 ;
        }
        #shead{
            list-style: none;
            font-size: 18px;
        }
        #shead li{
            margin:50px 40px;
        }
        #choice-right #yingyuan{
            list-style: none;
        }
        #choice-right #yingyuan>li{
            margin-bottom: 30px;
            float:left;
            margin-left:30px;
            margin-top: 45px;
            height: 30px;
            padding-top:5px; 
            cursor: pointer;
        }
        #choice-right #dayli{
            list-style: none;
        }
        #choice-right #dayli>li{
            float:left;
            margin-left:40px;
            margin-top: 9px;
            height: 30px;
            padding-top:5px;
            cursor: pointer;
        }
        #box{
            height:500px;
            /* background-color: #eb002a; */
            width:100%;
            float:left;
        }
        .current{
            background-color: #eb002a;
            color:white;
        }
        .item{
            width: 100%;
            height:500px;
            /* background-color: pink; */
        }
        table{
            Width:100%;
            margin:20px auto;
            text-align: center;
            border-collapse:collapse;
            font-size: 14px;
            color:#797979;
        }
        thead tr{
            height:40px;
            background-color: #EAEAEA;
        }
        tbody tr{
            height:50px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 18px;
        }
        .bg{
            background-color: #F6F6F6;
        }
        .hong{
            color:#eb002a;
            font-weight: 500;
        }
        .btngou{
            background-color: #eb002a;
            width:90px;
            height:30px;
            border:#eb002a;
            color:white;
            cursor: pointer;
        }
        #nothing{
            margin-top: 20px;
            width: 100%;
            height:300px;
            color:white;
            background-color: #EAEAEA;
        }
        #nothing p{
            position: absolute;
            font-weight: 500;
            font-size: 40px;
            color:white;
            margin-top:100px;
            margin-left: 350px;
        }
        #nothing a{
            color:#eb002a;
            position: absolute;
            margin-top:160px;
            margin-left: 550px;
        }
    </style>
</head>
<body>
    <div id="top">
        <p>票淘淘</p>
    </div>
    <div id="mmain">
        <div id="main">
            <p>我和我的家乡</p>
            <div id="xian"></div>
            <div id="main-left">
                <img src="../../img/one.png" alt="">
            </div>
            <div id="main-right">
                <p>导演：宁浩, 徐峥, 陈思诚, 闫非, 彭大魔, 邓超, 俞白眉</p>
                <p>主演：葛优,黄渤,范伟,邓超,沈腾,张占义,王宝强,徐峥,闫妮,马丽,刘敏涛,刘昊然</p>
                <p>类型：喜剧,剧情</p>
                <p>制片国家/地区：中国大陆</p>
                <p>片长：153分钟</p>
                <p>剧情介绍：电影《我和我的家乡》定档2020年国庆，延续《我和我的祖国》集体创作的方式，由张艺谋担当总监制，宁浩担任总导演，张一白担任总策划，宁浩、徐峥、陈思诚、闫非&彭大魔、邓超&...</p>
            </div>
        </div>
        <div id="cinema">
            <div style="font-size: 20px;margin:10px 0">选座购票</div>
            <div id="xian" style="background-color: black;"></div>
            <div id="choice-cinema">
                <div id="choice-left">
                    <ul id="shead">
                        <li>选择影城</li>
                        <li>选择时间</li>
                    </ul>
                </div>
                <div id="choice-right">
                    <ul id="yingyuan">
                        <li class="current">大地影院西安长安步行街店</li>
                        <li>奥斯卡国际影城（长安城南新天地）</li>
                        <li>西安欢乐小马电影城</li>
                        <li>UME影城（西安小寨店）</li>
                    </ul>
                    <ul id="dayli">
                        <li class="current">10月16日（今天）</li>
                        <li>10月17日（周六）</li>
                        <li>10月18日（周日）</li>
                    </ul>
                </div>
                <div id="box">
                    <div class="item" style="display:block;">
                        <div style="font-size: 20px;margin:10px 0;color:#eb002a;">大地影院西安长安步行街店</div>
                        <div id="xian" style="background-color: black;"></div>
                        <div id="nothing">
                            <p>该影片暂未开始售卖</p>
                            <a href="hotshowing.jsp">点击看看已上映的影片</a>
                        </div>
                        
                    </div>
                    <div class="item" style="display:none;">
                        <div style="font-size: 20px;margin:10px 0;color:#eb002a;">奥斯卡国际影城（长安城南新天地）</div>
                        <div id="xian" style="background-color: black;"></div>
                        <div id="nothing">

                        </div>
                        
                    </div>
                    <div class="item" style="display:none;">
                        <div style="font-size: 20px;margin:10px 0;color:#eb002a;">西安欢乐小马电影城</div>
                        <div id="xian" style="background-color: black;"></div>
                        <div id="nothing">

                        </div>
                        
                    </div>
                    <div class="item" style="display:none;">
                        <div style="font-size: 20px;margin:10px 0;color:#eb002a;">UME影城（西安小寨店）</div>
                        <div id="xian" style="background-color: black;"></div>
                        <div id="nothing">

                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var lis = document.getElementById('yingyuan').querySelectorAll('li');
    var items = document.getElementById('box').querySelectorAll('.item');
    for(var i = 0;i<lis.length;i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick = function (){
                for(var i =0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for(var i = 0;i<items.length;i++){
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }

    var dayli = document.getElementById('dayli').querySelectorAll('li');
    for(var i = 0;i<dayli.length;i++){
            dayli[i].onclick = function (){
                for(var i =0;i<dayli.length;i++){
                    dayli[i].className = '';
                }
                this.className = 'current';
            }
        }

        
</script>
</html>